<template>
	<view>
		<!-- 使用自定义搜索组件 -->
		<view class="search-box">
			<my-search></my-search>
		</view>
		<view class="view-post" v-if="goodsList.length>0">
			<!-- 左侧列表区域 -->
			<view class="view-post-son-left">
				<view class="view-post-son-item" v-for="(items, i) in goodsList" :key="items.postId" v-if="i % 2 == 0"
					@click="gotoDetail(items)">
					<image class="view-post-son-image-left" :src="getImagePath(JSON.parse(items.image))"
						mode="widthFix">
					</image>

					<rich-text class="text-ellipsis-left">
						<span class="text-ellipsis-left-span">{{ items.title }}</span>
					</rich-text>
					<view class="Love-control-left">
						<view class="control-left">
							<view class="control-left-view">
								<image class="control-left-image" :src="items.userImage" mode=""></image>
							</view>
							<text class="control-left-text">{{items.userName}}</text>
						</view>
						<view class="aa" @click.stop="add(items)">
							<uni-icons class="Love-control-left-box" type="heart" size="20"
								v-if="items.loveCount<=0"></uni-icons>
							<uni-icons color="red" class="Love-control-left-box" type="heart-filled" size="20"
								v-else></uni-icons>
							<text
								class="Love-control-left-text">{{items.likeCount>=10000?(items.likeCount/10000).toFixed(1)+'万':items.likeCount}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 右侧列表区域 -->
			<view class="view-post-son-left">
				<view class="view-post-son-item" v-for="(items, i) in goodsList" :key="items.postId" v-if="i % 2 != 0"
					@click="gotoDetail(items)">
					<image class="view-post-son-image-left" :src="getImagePath(JSON.parse(items.image))"
						mode="widthFix">
					</image>

					<rich-text class="text-ellipsis-left">
						<span class="text-ellipsis-left-span">{{ items.title }}</span>
					</rich-text>
					<view class="Love-control-left">
						<view class="control-left">
							<view class="control-left-view">
								<image class="control-left-image" :src="items.userImage" mode=""></image>
							</view>
							<text class="control-left-text">{{items.userName}}</text>
						</view>
						<view class="aa" @click.stop="add(items)">
							<uni-icons class="Love-control-left-box" type="heart" size="20"
								v-if="items.loveCount<=0"></uni-icons>
							<uni-icons color="red" class="Love-control-left-box" type="heart-filled" size="20"
								v-else></uni-icons>
							<text
								class="Love-control-left-text">{{items.likeCount>=10000?(items.likeCount/10000).toFixed(1)+'万':items.likeCount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="qqq" v-else>
			暂无相关作品喔
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: 0,
				//请求参数对象
				queryObj: {
					//查询关键词
					query: '',
					//商品分类Id
					cid: '',
					//页码值
					pagenum: 1,
					//每页显示多少条数据
					pagesize: 10
				},
				goodsList: [],
				total: 0,
				//是否正在请求数据,节流阀
				isloading: false
			};
		},
		onLoad(options) {
			//将页面参数转存到this.queryObj对象中
			this.queryObj.query = options.query || ''
			this.queryObj.cid = options.cid || ''
			this.userId = options.userId
			this.getGoodsList()
		},
		methods: {
			async add(items) {
				const _this = this;
				const _items = items;
				if (items.loveCount == 1) {
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/love/delete', {
						postId: _items.postId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data > 0) {
						// 将对应的点赞数减1
						_this.likeCountDelete(items, _items.postId, _items.likeCount);
			
					} else {
						uni.$ShowMsg("取消失败！")
					}
				} else {
					const {
						data: res
					} = await uni.$http.post('http://localhost:8080/user/love/add', {
						postId: _items.postId,
						userId: _this.userId
					})
					if (res.code !== 200) return uni.$ShowMsg();
					if (res.data > 0) {
						//将对应的点赞数加1
						_this.likeCountAdd(items, _items.postId, _items.likeCount);
					} else {
						uni.$ShowMsg("点赞失败！")
					}
				}
			},
			
			
			//将点赞数减1
			async likeCountDelete(items, postId, likeCount) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/likeCountDelete', {
					postId: postId,
					likeCount: likeCount - 1
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("取消失败，数据异常！");
				} else {
					this.$set(items, 'loveCount', 0);
					this.$set(items, 'likeCount', items.likeCount - 1);
				}
			},
			//将点赞数加1
			async likeCountAdd(items, postId, likeCount) {
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/article/likeCountAdd', {
					postId: postId,
					likeCount: likeCount + 1
				})
				if (res.code !== 200) {
					return uni.$ShowMsg("点赞失败，数据异常！");
				} else {
					this.$set(items, 'loveCount', 1);
					this.$set(items, 'likeCount', items.likeCount + 1);
				}
			},
			
			//解析获取对应的图片路径
			getImagePath(imageArray) {
				if (Array.isArray(imageArray) && imageArray.length > 0) {
					return imageArray[0].filePath;
				}
				return ''; // 或者默认的图片路径
			},
			//获取商品列表数据的方法
			async getGoodsList(cb) {
				const _this = this
				//打开节流阀
				this.isloading = true
				//发起请求
				const {
					data: res
				} = await uni.$http.post('http://localhost:8080/user/search/postList', {
					query: _this.queryObj.query,
					userId: _this.userId,
					page: _this.queryObj.pagenum,
					size: _this.queryObj.pagesize
				})
				if (res.code !== 200) return uni.$showMsg()
				//关闭节流阀
				this.isloading = false
				cb && cb()
				//为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
				this.goodsList = [...this.goodsList, ...res.data]
				this.total = res.total
			},
			gotoDetail(goods) {
				uni.navigateTo({
					url: '/subpkg/Post_details/Post_details?postId=' + goods.postId + '&userId=' + this.userId
				})
			}
		},
		//触底的事件
		onReachBottom() {
			//判断是否还有下一页数据
			if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total)
				return uni.$showMsg('数据加载完毕！')

			//判断是否正在请求其他数据，如果是，则不发起额外的请求
			if (this.isloading) return
			//让页码值自增+1
			this.queryObj.pagenum += 1
			//重新获取列表数据
			this.getGoodsList()
		},
		onPullDownRefresh() {
			//重置关键数据
			this.queryObj.pagenum = 1
			this.total = 0
			this.isloading = false
			this.goodsList = []

			//重新发起数据请求
			this.getGoodsList(() => uni.stopPullDownRefresh())
		}
	}
</script>

<style lang="scss">
	.view-post {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start; // 添加这一行

		//左侧列表内容样式
		.view-post-son-left {

			width: 48%; // 修改为百分比
			margin: 2% 1%;
			background-color: azure;

			// height: 2000px;

			.view-post-son-item {

				width: 100%;
				margin-bottom: 10rpx;

				.view-post-son-image-left {
					border-radius: 4% 4% 0 0;
					width: 100%;
					// height: auto;
				}

				.text-ellipsis-left {
					.text-ellipsis-left-span {
						font-size: 28rpx;
						padding: 4px 10rpx;
						display: block;
						white-space: normal;
						/* 修改为normal */
						word-wrap: break-word;
						/* 添加word-wrap属性 */

					}
				}

				.Love-control-left {
					width: 100%;
					height: 30px;
					position: relative;
					display: flex;

					.control-left {
						width: 70%;
						height: 30px;
						display: flex;
						align-items: center;
						justify-content: flex-start;

						.control-left-view {
							width: 20%;
							display: flex;
							align-items: center;
							justify-content: center;

							.control-left-image {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								margin-left: 10rpx;
								margin-right: 5rpx;
							}
						}


						.control-left-text {
							font-size: 20rpx;
							font-family: Arial, Helvetica, sans-serif;

							color: #444;
							white-space: nowrap;
							/* 禁止换行 */
							overflow: hidden;
							/* 隐藏溢出部分 */
							text-overflow: ellipsis;
							/* 用省略号代替溢出部分 */
						}
					}

					.Love-control-left-box {
						position: absolute;
						top: 50%;
						right: 17%;
						transform: translateY(-50%);
					}

					.Love-control-left-text {
						font-size: 24rpx;
						position: absolute;
						top: 50%;
						left: 83%;
						transform: translateY(-50%);
					}
				}
			}
		}
	}
	
	.qqq{
		width: 100%;
		height: 600px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 50rpx;
		color: #c0c0c0;
	}
</style>